<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <title>水平居中设置-行内元素</title>
    <style>
        div {
            border: 1px solid red;
            margin: 20px;
        }

        .txtCenter {
            text-align: center;
        }

        .imgCenter {
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="txtCenter">我想要在父容器中水平居中显示。</div>

    <!--下面是任务部分-->

    <div class="imgCenter"><img src="http://img.mukewang.com/52da54ed0001ecfa04120172.jpg" /></div>
</body>

</html>

<!-- 我们在实际工作中常会遇到需要设置水平居中的场景，比如为了美观，文章的标题一般都是水平居中显示的。
这里我们又得分两种情况：行内元素 还是 块状元素 ，
块状元素里面又分为定宽块状元素，以及不定宽块状元素。

今天我们先来了解一下行内元素怎么进行水平居中？

如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。
-->